import Icon from '@/components/Icon'
import { RootState } from '@/store'
import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'
import { likeAritcle, colleckAritcle } from '@/store/actions/article'

type Props = {
  goComment?: () => void
  onShare?: () => void
  onComment?: () => void
}
const CommentFooter = ({ goComment, onShare, onComment }: Props) => {
  const { detail } = useSelector((state: RootState) => state.article)
  const dispatch = useDispatch()

  // 点赞
  const onLike = async () => {
    await dispatch(likeAritcle(detail.art_id, detail.attitude))
  }
  // 收藏
  const onCollect = async () => {
    await dispatch(colleckAritcle(detail.art_id, detail.is_collected))
  }
  // 跳转评论

  return (
    <div className={styles.root}>
      <div className="input-btn">
        <Icon type="iconbianji" />
        <span>去评论</span>
      </div>

      <div className="action-item" onClick={goComment}>
        <Icon type="iconbtn_comment" />
        <p>评论</p>
        <span className="bage">{0}</span>
      </div>
      {/* 'iconbtn_like2' */}
      <div className="action-item" onClick={onLike}>
        <Icon
          type={detail.attitude === 1 ? 'iconbtn_like_sel' : 'iconbtn_like2'}
        />
        <p>点赞</p>
      </div>
      <div className="action-item" onClick={onCollect}>
        <Icon
          type={detail.is_collected ? 'iconbtn_collect_sel' : 'iconbtn_collect'}
        />
        <p>收藏</p>
      </div>
      <div className="action-item">
        <Icon type="iconbtn_share" onClick={onShare} />
        <p>分享</p>
      </div>
    </div>
  )
}

export default CommentFooter
